<template>
  <div>
    <el-form>
      <el-form-item label="服务：">
        <el-button type="primary" @click="handleToggleChart(0)">全部</el-button>
        <el-button type="primary" @click="handleToggleChart(1)">业务经办</el-button>
        <el-button type="primary" @click="handleToggleChart(2)">电子处方外流</el-button>
        <el-button type="primary" @click="handleToggleChart(3)">定点刷卡结算</el-button>
        <el-button type="primary" @click="handleToggleChart(4)">医保移动支付</el-button>
        <el-button type="primary" @click="handleToggleChart(5)">控费事前提醒</el-button>
        <el-button type="primary" @click="handleToggleChart(6)">商业保险</el-button>
      </el-form-item>
    </el-form>

    <div ref="network_box" class="network_box">
      <el-button :class="{fullscreen: fullScreen}" size="small" @click="toggleFullScreen">{{fullScreen ? "退出全屏" : "进入全屏"}}</el-button>
      <div ref="network" class="network" :style="{height: canvasHeight}"></div>
    </div>
  </div>
</template>

<script>
  import utils from "../../utils";
  import vis from "vis";

  export default {
    data () {
      return {
        pageSize: 3,
        API: {
          query: "/gafe/biz_logs"
        },
        totalNodeData: null,
        nodeData: [],
        fullScreen: false,
        network: null,
        x: null,
        y: null
      }
    },
    computed: {
      canvasHeight () {
        return (window.innerHeight - 188) + "px";
      }
    },
    mounted () {
      document.querySelector(".content").style.paddingBottom = 0;
      this.getData();
    },
    methods: {
      getData () {
        this.$.ajax({
          type: "get",
          url: "http://localhost:8090/static/topology.json",
          success: res => {
            this.totalNodeData = res;

            this.manageData(this.$route.query.id);
          }
        });
      },
      manageData (id) {
        this.nodeData = [];

        this.totalNodeData.forEach((node) => {
        	node.color ={
        		background: "#eef3f6",
            border: "#73a1bf"
          };
          if (node.id === Number(id)) {
            this.nodeData.push(node);

            (function filterNode(node, ctx) {
              ctx.totalNodeData.forEach((item) => {
                if (item.parentId === node.id) {
                  ctx.nodeData.push(item);
                  filterNode(item, ctx);
                }
              })
            }(node, this));
          }
        });

        this.handleDraw();
      },
      handleDraw () {
        const edges = [];

        const container = this.$refs.network;

        this.nodeData.forEach(function (item) {
          edges.push({from: item.parentId, to: item.id});
        });

        const data = {
          nodes: this.nodeData,
          edges: edges
        };

        const options = {
//          edges: {
//            smooth: {
//              type: "straightCross",
//              forceDirection: "vertical",
//            }
//          },
          layout: {
            hierarchical: {
              direction: "LR",
              nodeSpacing: 30
            }
          },
          interaction: {
            hover: true,
            zoomView: false
          },
          physics: false
        };

        this.network = new vis.Network(container, data, options);

        this.network.moveTo({scale: 1});

        this.network.on("click", (params) => {

        });

        this.network.on("dragStart", (params) => {
          this.x = params.pointer.canvas.x;
          this.y = params.pointer.canvas.y;
        });

        this.network.on("dragging", (params) => {
          params.nodes[0] && this.network.moveNode(params.nodes[0], params.pointer.canvas.x, params.pointer.canvas.y);
        });

        this.network.on("dragEnd", (params) => {
          if (!params.nodes.length) return;

          const x = params.pointer.canvas.x;
          const y = params.pointer.canvas.y;
          const id = params.nodes[0];

          const node = this.nodeData.find((item) => {
            return item.id === id;
          });

          this.nodeData.forEach((item) => {
            const rect = this.network.getBoundingBox(item.id);

            if (x > rect.left && x < rect.right && y > rect.top && y < rect.bottom) {
              if (node === item) return;

              if (item.parentId === node.id) {
                this.tip("warning", "不能移动到子节点！");

                this.network.moveNode(id, this.x, this.y);
                return;
              }

              if (item.id === node.parentId) {
                this.tip("warning", "不能移动到父节点！");

                this.network.moveNode(id, this.x, this.y);
                return;
              }

              this.$confirm("确定移动该节点吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(_ => {
                node.parentId = item.id;
                node.level = item.level + 1;

                (function addChildrenLevel(node, ctx) {
                  ctx.nodeData.forEach((item) => {
                    if (item.parentId === node.id) {
                      item.level = node.level + 1;
                      addChildrenLevel(item, ctx);
                    }
                  })
                }(node, this));

                this.handleDraw();
              }).catch(_ => {
                this.tip("info", "已取消删除！");
                this.network.moveNode(id, this.x, this.y);
              });
            }
          })
        });

        this.network.on("hoverNode", (params) => {
//          console.log(params);
        });

        this.network.on("zoom", (params) => {

        });

        this.network.on("doubleClick", () => {
          this.toggleFullScreen();
        });
      },
      toggleFullScreen () {
        this.destroyNetwork();

        if (!this.fullScreen) {
          this.$refs.network_box.style.width = window.screen.width + "px";
          this.$refs.network.style.height = window.screen.height + "px";

          utils.launchFullScreen(this.$refs.network_box);
        } else {
          this.$refs.network_box.style.width = "100%";
          this.$refs.network.style.height = this.canvasHeight;

          utils.cancelFullScreen();
        }

        setTimeout(() => {
          this.handleDraw();
        }, 50);

        this.fullScreen = !this.fullScreen;
      },
      destroyNetwork () {
        if (this.network) {
          this.network.destroy();
          this.network = null;
        }
      },
      handleToggleChart (id) {
        this.$router.push(`/platform/topologyChart?id=${id}`);
        this.manageData(id);
      }
    }
  }
</script>

<style scoped lang="scss">
  section {
    margin-bottom: 30px;
  }

  .title {
    font-weight: normal;
    border-left: 2px solid #00d1b2;
    padding-left: 5px;
    margin-bottom: 10px;
    font-size: 16px;

    a {
      float: right;
      font-size: 14px;
      cursor: pointer;
      color: #00d1b2;
    }
  }

  .el-col {
    text-align: center;
    border: 1px solid #00d1b2;
    height: 60px;
    line-height: 60px;
    color: #6f7376;
    font-size: 14px;
    cursor: pointer;

    .num {
      font-size: 48px;
      color: #00d1b2;
      margin-left: 10px;
    }
  }

  .network_box {
    position: relative;

    .el-button {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 100;

      &.fullscreen {
        right: 50px;
        top: 50px;
      }
    }
  }

  .network {
    width: 100%;
    /*height: 600px;*/
  }
</style>
